<template>
<div class="common-body-wrapper">
  <!-- <div class="switch-btn-box" v-if="isShowCouponStatus">
      <span class="tip">支持优惠券线上购买</span>
      <el-switch v-model="switchCouponStatus" :active-color="'#'+skinType" inactive-color="#DEDEDE" v-if="isPermmited('TRADER_COUPON:COUPON:MANAGE:ONLINESALESTATUS_EDIT') && isShowSwitch" @change="switchCouponBtnStatus()" :active-value="1" :inactive-value="0"></el-switch>
    </div>-->
  <search-header single-width="150" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" :isNeedTree="true" :isCheckbox="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>
  <multi-fun-table :sortColumn="notFormatColumn" :orderType="sortType" :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
    <div class="operate-btn-group" slot="operateBtnGroup">
      <a class="ake_btn ake_btn_text" v-if="isPermmited('TRADER_COUPON:COUPON:MANAGE:SAVE')" @click.prevent="MerchantCouponsModal_open()">新增优惠</a>
      <!-- <a class="ake_btn ake_btn_text" v-if="isPermmited('TRADER_COUPON:COUPON:MANAGE:SAVE')" @click.prevent="SellerPurchaseSetupModal_open()">商家购买设置</a> -->
    </div>
    <template slot="tdCell" slot-scope="props">
      <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
        <template v-for="(item, index) in props.children">
          <el-table-column v-if="item.checked" :key="index" :label="item.text" :min-width="item.minWidth" :width="item.width" :prop="item.prop" :sortable="item.sortable"></el-table-column>
        </template>
      </el-table-column>
      <el-table-column v-else :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
        <template slot-scope="scope">
          <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
          <span v-else-if="'name'==props.prop">
            <a class="imgLink" @click="checkSellCoupon_detail(scope.row)">{{scope.row[props.prop] }}</a>
          </span>
          <span v-else-if="'validFrom' == props.prop && scope.row['validFrom']">{{scope.row['validFrom'] | mileSecondToDate}}至{{scope.row['validTo'] | mileSecondToDate}}</span>
          <span v-else-if="'sellFrom' == props.prop && scope.row['sellFrom']">{{scope.row['sellFrom'] | mileSecondToDate}}至{{scope.row['sellTo'] | mileSecondToDate}}</span>

          <span v-else-if="'parkListCount' == props.prop && scope.row[props.prop]">
            <a class="imgLink" @click="ParkListModal_open(scope.row)">查看({{scope.row[props.prop] }})</a>
          </span>
          <span v-else-if="'totalNum' == props.prop">{{scope.row['totalNum']-scope.row['totalAvilableToBuy']}} / {{scope.row['totalNum'] | totalNumShow}}</span>
          <span v-else-if="'originalPrice' == props.prop || 'realPrice' == props.prop">{{scope.row[props.prop] | formatMoney}}</span>
          <span v-else>{{ scope.row[props.prop] }}</span>
        </template>
      </el-table-column>
    </template>
    <template slot="operateCell" slot-scope="props">
      <el-table-column :fixed="props.fixed" :label="props.label" width="160" class-name="operateCell">
        <template slot-scope="scope">
          <el-button size="small" type="primary" icon="icon-edit" class="ake-icon-font" title="编辑" v-if="isPermmited('TRADER_COUPON:COUPON:MANAGE:SAVE')" @click="MerchantCouponsEditModal_open(scope.row,1)" plain></el-button>

          <el-button size="small" type="primary" icon="icon-sm_normal" class="ake-icon-font" title="售卖" plain @click="toSell(scope.row)" :disabled="scope.row['status']!='启用'"></el-button>

          <el-button size="small" type="primary" icon="icon-gjpz_normal" class="ake-icon-font" :title="(onlineSaleStatus && !scope.row['financialParkId']) ?'没有财务主体无法线上购买' : '购买配置'" v-if="isPermmited('TRADER_COUPON:COUPON:MANAGE:SAVE')" @click="shoppingSetup_open(scope.row)" :disabled="!onlineSaleStatus || !scope.row['financialParkId']" plain></el-button>

          <el-button size="small" type="primary" icon="icon-lock" class="ake-icon-font" title="禁用" v-if="isPermmited('TRADER_COUPON:COUPON:MANAGE:UPDATESTATUS') && scope.row['status']=='启用'" @click.prevent="showDialog('是否禁用？', ['确认','取消'],function(){function_comfirm('DJ',scope.row['id'])})" plain></el-button>

          <el-button size="small" type="primary" icon="icon-unlock_normal" class="ake-icon-font" title="启用" v-if="isPermmited('TRADER_COUPON:COUPON:MANAGE:UPDATESTATUS') && (scope.row['status']=='禁用'||scope.row['status']=='未启用')" @click.prevent="showDialog('是否启用？', ['确认','取消'],function(){function_comfirm('QY',scope.row['id'])})" plain></el-button>

          <el-button size="small" type="danger" icon="icon-delete" class="ake-icon-font" title="删除" v-if="isPermmited('TRADER_COUPON:COUPON:MANAGE:DEL')" @click.prevent="showDialog('是否删除？', ['确认','取消'],function(){function_comfirm('DT',scope.row['id'])})" plain></el-button>
        </template>
      </el-table-column>
    </template>
  </multi-fun-table>

  <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>

  <!--至少选择一项  modal-->
  <basic-modal ref="TipModal" bodyTxt="请至少选择一项">
    <h3 slot="title">温馨提示</h3>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click="TipModal_confirm('至少选择一项', ['关闭'])">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('至少选择一项', ['关闭'])">取消</button>
    </div>
  </basic-modal>
  <!-- 新增优惠 -->
  <basic-modal ref="MerchantCouponsModal" static="true" width="640">
    <h3 slot="title" v-if="MerchantCouponsModalData.type=='add'">{{editTitle}}</h3>
    <h3 slot="title" v-else>{{editTitle}}-{{MerchantCouponsModalData.basicData.name}}</h3>
    <div class="modal-body hadStepModal" slot="modal-body">
      <div class="btnGroup" v-if="MerchantCouponsModalData.type=='add' && onlineSaleStatus">
        <div @click="toggleTab('basicTab')" class="btnItem" :class="{activeText:MerchantCouponsModalData.tabName=='basicTab'}">
          <span class="step-icon" :class="{activeTab:MerchantCouponsModalData.tabName=='basicTab'}">1</span>
          <span class="step-text">基础信息</span>
        </div>
        <div @click="toggleTab('higherTab')" class="btnItem" :class="{activeText:MerchantCouponsModalData.tabName=='higherTab'}">
          <span class="step-icon" :class="{activeTab:MerchantCouponsModalData.tabName=='higherTab'}">2</span>
          <span class="step-text">购买配置</span>
        </div>
      </div>
      <el-form ref="MerchantCoupons_form" :model="MerchantCouponsModalData.basicData" :rules="rules" label-width="95px" label-position="left" style="padding:30px 50px;">
        <div v-show="MerchantCouponsModalData.tabName=='basicTab'" class="basicTab-box">
          <el-form-item prop="name" label="券名称">
            <el-input v-model="MerchantCouponsModalData.basicData.name" placeholder="请输入券名称"></el-input>
          </el-form-item>

          <el-form-item prop="couponType" label="券类型">
            <el-select v-model="MerchantCouponsModalData.basicData.couponType" placeholder="请选择类型" @change="changeFaceValue">
              <el-option label="免费券" value="0"></el-option>
              <el-option label="金额扣减券" value="1"></el-option>
              <el-option label="金额折扣券" value="2"></el-option>
              <el-option label="金额固定值券" value="3"></el-option>
              <el-option label="时间券" value="4"></el-option>
              <el-option label="不同计价券" value="5"></el-option>
            </el-select>
            <div class="tipsBox" style="right:-23px;">
              <i class="el-icon-question"></i>
              <div class="tips right">
                <p>免费券：使用后免除停车费</p>
                <p>金额扣减券：对停车费进行金额扣减，扣减后停车费最低为0元</p>
                <p>金额折扣券：对停车费用进行折扣优惠</p>
                <p>金额固定值券：停车费按照固定值券的金额进行收费</p>
                <p>时间券：针对停车时间进行免费或停车金额进行优惠</p>
                <p>不同计价券：按照券的收费规则来收费，而不是按照停车场原有的收费规则收费</p>
              </div>
            </div>
          </el-form-item>

          <el-form-item prop="couponRule" label="扣减类型" v-if="MerchantCouponsModalData.basicData.couponType==4">
            <el-select v-model="MerchantCouponsModalData.basicData.couponRule" placeholder="请选择扣减类型">
              <el-option label="扣减前面时间" value="0"></el-option>
              <el-option label="扣减后面时间" value="1"></el-option>
              <el-option label="扣减进场时间和优惠时间计算的金额" value="2"></el-option>
              <el-option label="扣减优惠时间和计费结束时间计算的金额" value="3"></el-option>
            </el-select>
            <div class="tipsBox" style="right:-23px;">
              <i class="el-icon-question"></i>
              <div class="tips right" style="width:330px;">
                <img v-if="Number(MerchantCouponsModalData.basicData.couponRule)==0" src="../../assets/img/扣减前面时间2.png" alt />
                <img v-if="Number(MerchantCouponsModalData.basicData.couponRule)==1" src="../../assets/img/扣减后面时间2.png" alt />
                <img v-if="Number(MerchantCouponsModalData.basicData.couponRule)==2" src="../../assets/img/扣减进场时间和优惠时间计算的金额2.png" alt />
                <img v-if="Number(MerchantCouponsModalData.basicData.couponRule)==3" src="../../assets/img/扣减优惠时间和结束时间计算的金额2.png" alt />
              </div>
            </div>
          </el-form-item>

          <el-form-item prop="faceValue" label="停车费优惠" v-if="MerchantCouponsModalData.basicData.couponType==1">
            <el-input v-model="MerchantCouponsModalData.basicData.faceValue" placeholder="请输入优惠金额"></el-input>
            <span class="item-unit">元</span>
          </el-form-item>

          <el-form-item prop="faceValue" label="折扣" v-if="MerchantCouponsModalData.basicData.couponType==2">
            <div class="item-row grayChunk">
              <span style="margin-right:10px;">停车费</span>
              <div class="pItem">
                <el-input v-model="MerchantCouponsModalData.basicData.faceValue" placeholder="1-9的数值"></el-input>
                <span class="unit-last" style="right:10px;">折</span>
              </div>
            </div>
            <div class="tipsBox" style="right:-23px;">
              <i class="el-icon-question"></i>
              <div class="tips right">
                <p>停车费：10元</p>
                <p>打3折 ：3元</p>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="面值" prop="faceValue" v-if="MerchantCouponsModalData.basicData.couponType==3">
            <div class="item-row grayChunk">
              <span>无论停多长时间只收</span>
              <div class="pItem">
                <el-input v-model="MerchantCouponsModalData.basicData.faceValue" placeholder="多少"></el-input>
                <span class="unit-last" style="right:10px;">元</span>
              </div>
            </div>
          </el-form-item>

          <el-form-item prop="faceValue" label="计费组编号" v-if="MerchantCouponsModalData.basicData.couponType==5">
            <el-input v-model="MerchantCouponsModalData.basicData.faceValue" placeholder="请输入计费组编号"></el-input>
          </el-form-item>

          <!-- 时间券 -->
          <el-form-item label="优惠时间" prop="faceValue" v-if="MerchantCouponsModalData.basicData.couponType==4 && (MerchantCouponsModalData.basicData.couponRule==0 || MerchantCouponsModalData.basicData.couponRule==2)">
            <div class="item-row grayChunk">
              <span>减去前面</span>
              <div class="pItem">
                <el-input v-model.number="MerchantCouponsModalData.basicData.faceValue" placeholder="多少"></el-input>
                <span class="unit-last" style="right:10px;">分钟</span>
              </div>
              <span v-if="MerchantCouponsModalData.basicData.couponRule==2">的金额</span>
              <span v-else>的时长再计费</span>
            </div>
          </el-form-item>

          <el-form-item prop="faceValue" label="优惠时间" v-if="MerchantCouponsModalData.basicData.couponType==4 && (MerchantCouponsModalData.basicData.couponRule==1 || MerchantCouponsModalData.basicData.couponRule==3)">
            <div class="item-row grayChunk">
              <span>减去后面</span>
              <div class="pItem">
                <el-input v-model.number="MerchantCouponsModalData.basicData.faceValue" placeholder="多少"></el-input>
                <span class="unit-last" style="right:10px;">分钟</span>
              </div>
              <span v-if="MerchantCouponsModalData.basicData.couponRule==3">的金额</span>
              <span v-else>的时长再计费</span>
            </div>
          </el-form-item>

          <el-form-item prop="useParkingFee" label="享受免费时长" v-if="MerchantCouponsModalData.basicData.couponType==4&&(MerchantCouponsModalData.basicData.couponRule==0||MerchantCouponsModalData.basicData.couponRule==1)">
            <el-radio-group v-model="MerchantCouponsModalData.basicData.useParkingFee">
              <el-radio :label="0">不享受</el-radio>
              <el-radio :label="1">享受</el-radio>
            </el-radio-group>
            <div class="tipsBox" v-if="Number(MerchantCouponsModalData.basicData.useParkingFee)==1">
              <i class="el-icon-question"></i>
              <div class="tips right" style="width:330px;">
                <img v-if="Number(MerchantCouponsModalData.basicData.couponRule)==0" src="../../assets/img/优惠后有免费时长2.png" alt />
                <img v-if="Number(MerchantCouponsModalData.basicData.couponRule)==1" src="../../assets/img/无命名2.png" alt />
              </div>
            </div>
          </el-form-item>

          <div class="item-row" v-if="MerchantCouponsModalData.basicData.couponType==1 || (MerchantCouponsModalData.basicData.couponType==4 &&MerchantCouponsModalData.basicData.couponRule==0)">
            <el-form-item prop="isOverlying" label="是否可叠加" style="flex:1;">
              <el-radio-group v-model="MerchantCouponsModalData.basicData.isCover">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item prop="maxCoverNum" label="一次停车最多使用" v-if="MerchantCouponsModalData.basicData.isCover==1" label-width="120px">
              <el-input style="width:100px;" v-model="MerchantCouponsModalData.basicData.maxCoverNum" placeholder="多少"></el-input>
              <span class="unit-last" style="right:5px;">张</span>
            </el-form-item>
          </div>

          <el-form-item label="适用车场" prop="parkJson">
            <div class="el-form--inline">
              <template v-if="selectedParkingLot.length">
                <el-tooltip placement="bottom-start">
                  <div slot="content">
                    <ul class="selectParkingLotTree">
                      <li v-for="item in selectedParkingLot" style="margin-bottom: 4px; font-size: 12px;">{{ item }}</li>
                    </ul>
                  </div>
                  <div class="selected-parkingLot">{{selectedParkingLotStr}}</div>
                </el-tooltip>
              </template>

              <div v-if="!selectedParkingLot.length" class="selected-parkingLot grayTip">未选择任何停车场</div>

              <el-button size="small" type="primary" @click="openSelectParkModal" class="ake_btn_text">选择停车场</el-button>
            </div>
          </el-form-item>

          <el-form-item label="财务主体" prop="financialParkId" v-show="tableData.parkItems && tableData.parkItems.length>1">
            <template>
              <el-radio-group v-model="MerchantCouponsModalData.basicData.financialParkId" class="finacSubj">
                <div class="finacSubj-item" v-for="(item,index) in tableData.parkItems">
                  <el-radio :label="item.value" :checked="MerchantCouponsModalData.basicData.financialParkId==item.value">{{item.name}}</el-radio>
                  <!-- <div class="del-btn" @click="delectSelectParkItem(index,item.value)">
                    <img src="../../assets/img/ic_subscribe_delete.svg" alt />
                  </div> -->
                </div>
              </el-radio-group>
            </template>
          </el-form-item>

          <div class="item-row">
            <el-form-item prop="validDay" label="使用有效期" style="flex:1;margin-right:50px;">
              <div class="item-row grayChunk">
                <span>领券后</span>
                <div class="pItem">
                  <el-input v-model.number="MerchantCouponsModalData.basicData.validDay"></el-input>
                  <span class="unit-last" style="right: 6px;">分钟</span>
                </div>
                <!-- <el-form-item label-width="0px;" style="width:100px;margin-left:10px;margin-right:10px;flex:1;">
                    <el-input v-model.number="MerchantCouponsModalData.basicData.validDay"></el-input>
                    <span class="unit-last" style="right: 10px;">分钟</span>
                  </el-form-item>-->
                <span>内使用</span>
              </div>
              <div class="tipsBox" style="right:-25px;">
                <i class="el-icon-question"></i>
                <div class="tips right">
                  <p>这张优惠券发放给车主之后，车主需要在这个时间段内使用，超过这个时间则优惠券失效</p>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="expireRefund" label-width="0px">
              <el-checkbox v-model="MerchantCouponsModalData.basicData.expireRefund" :true-label="1" :false-label="0">逾期退回</el-checkbox>
            </el-form-item>
          </div>
          <div class="item-row">
            <el-form-item prop="originalPrice" label="优惠券原价" style="flex:1;">
              <el-input v-model="MerchantCouponsModalData.basicData.originalPrice" placeholder="请输入原价"></el-input>
              <span class="unit-last" style="right:5px;">元</span>
            </el-form-item>
            <el-form-item label-width="0px" style="margin-left:20px;margin-right:20px;">
              <el-checkbox v-model="MerchantCouponsModalData.hasDiscount" :true-label="1" :false-label="0">折扣价</el-checkbox>
            </el-form-item>
            <el-form-item prop="realPrice" label-width="0px" v-if="MerchantCouponsModalData.hasDiscount">
              <el-input style="width:100px;" v-model="MerchantCouponsModalData.basicData.realPrice"></el-input>
              <span class="unit-last" style="right:5px;">元</span>
            </el-form-item>
          </div>
          <el-form-item label="使用条件">
            <div class="item-row grayChunk">
              <span>停车费在</span>
              <el-form-item label-width="0px" prop="useRuleMin" style="flex:1;margin-left:10px;">
                <el-input placeholder="多少" v-model="MerchantCouponsModalData.basicData.useRuleMin"></el-input>
                <span class="unit-last" style="right:5px;">元</span>
              </el-form-item>
              <span style="margin-left:5px;margin-right:5px;">-</span>
              <el-form-item label-width="0px" prop="useRuleMax" style="flex:1;margin-right:10px;">
                <el-input placeholder="多少" v-model="MerchantCouponsModalData.basicData.useRuleMax"></el-input>
                <span class="unit-last" style="right:15px;">元</span>
              </el-form-item>
              <span>可使用此优惠</span>
            </div>
            <div class="tipsBox" style="right:-23px;">
              <i class="el-icon-question"></i>
              <div class="tips right bottom">
                <p>使用条件是当车主的停车费达到这个区间值时，才能使用优惠券，默认是0元到9999元就可以使用优惠券。</p>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="更多设置">
            <div class="show-rule-detail-icon" @click="MerchantCouponsModalData.moreSetupShow=!MerchantCouponsModalData.moreSetupShow">
              <i class="el-icon-arrow-down" :class="{rotate180:MerchantCouponsModalData.moreSetupShow}"></i>
            </div>
          </el-form-item>
          <div v-show="MerchantCouponsModalData.moreSetupShow">
            <div class="item-row">
              <el-form-item prop="isLimitTotal" label="券数量" style="flex:1;">
                <el-radio-group v-model="MerchantCouponsModalData.basicData.isLimitTotal">
                  <el-radio :label="0">有限</el-radio>
                  <el-radio :label="1">无限</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="totalNum" label="总数" v-if="MerchantCouponsModalData.basicData.isLimitTotal===0" label-width="40px">
                <el-input v-model.number="MerchantCouponsModalData.basicData.totalNum" placeholder="请输入发行数量"></el-input>
                <span class="unit-last" style="right:5px;">张</span>
              </el-form-item>
            </div>
            <el-form-item prop="sellFromTo" label="可售卖时间">
              <el-date-picker type="datetimerange" placeholder="请选择" v-model="MerchantCouponsModalData.basicData.sellFromTo" :picker-options="afterPickerOptions" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
            </el-form-item>
            <el-form-item prop="validFromTo" label="可发放时间">
              <el-date-picker type="datetimerange" placeholder="请选择" v-model="MerchantCouponsModalData.basicData.validFromTo" :picker-options="afterPickerOptions" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div v-show="MerchantCouponsModalData.tabName=='higherTab' && onlineSaleStatus" class="higherTab-box couponList-chunk">
          <p>请选择可线上购买券的商户</p>
          <div style="margin-top: 15px;">
            <el-input placeholder="请输入商户名称" v-model.trim="MerchantCouponsModalData.shoppingSetup.couponName" @change="searchCouponKeyWord">
              <!-- <template slot="prepend">商户</template> -->
              <el-button slot="append" icon="el-icon-search" @click.prevent="searchCouponKeyWord()"></el-button>
            </el-input>
          </div>
          <div class="couponList-box vertical">
            <template>
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange2">商户 ({{MerchantCouponsModalData.shoppingSetup.checkedCoupons.length}})</el-checkbox>
              <el-checkbox-group v-model="MerchantCouponsModalData.shoppingSetup.checkedCoupons" @change="handleCheckedChange2">
                <el-checkbox v-for="item in MerchantCouponsModalData.shoppingSetup.couponList" :label="item.id" :value="item.id" :key="item.id" v-if="!item.isHidden">{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </template>
          </div>
        </div>
      </el-form>
    </div>
    <div class="modal-footer" slot="modal-footer" v-if="MerchantCouponsModalData.type=='add' && onlineSaleStatus">
      <button class="ake_btn ake_btn_text ake_btn_confirm" v-if="MerchantCouponsModalData.tabName=='higherTab'" @click.stop="MerchantCouponsModal_save($event,'MerchantCoupons_form')">确认</button>
      <button v-if="MerchantCouponsModalData.tabName=='higherTab'" class="ake_btn ake_btn_text" @click="toggleTab('basicTab')">
        <i class="el-icon-arrow-left"></i>上一步
      </button>
      <button v-if="MerchantCouponsModalData.tabName=='basicTab'" class="ake_btn ake_btn_text ake_btn_confirm" @click="toggleTab('higherTab')">
        下一步
        <i class="el-icon-arrow-right el-icon--right"></i>
      </button>
      <button v-if="MerchantCouponsModalData.tabName=='basicTab'" class="ake_btn ake_btn_text modal-close" @click="closed('MerchantCouponsModal')">取消</button>
    </div>
    <div class="modal-footer" slot="modal-footer" v-else>
      <button class="ake_btn ake_btn_text ake_btn_confirm" v-if="MerchantCouponsModalData.tabName=='basicTab'" @click.stop="MerchantCouponsModal_save($event,'MerchantCoupons_form')">确认</button>
      <button class="ake_btn ake_btn_text ake_btn_confirm" v-if="MerchantCouponsModalData.tabName=='higherTab'" @click.stop="shoppingSetupEdit_save()">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('MerchantCouponsModal')">取消</button>
    </div>
  </basic-modal>

  <basic-modal ref="ParkListModal" static="true" width="900">
    <h3 slot="title">停车场列表</h3>
    <div class="modal-body" slot="modal-body">
      <div class="tableDetial">
        <template>
          <el-table :data="ParkListModalData.list" border min-height="300">
            <el-table-column prop="name" label="停车场名称" min-width="150" align="left"></el-table-column>
            <el-table-column prop="address" label="地址" min-width="200" align="left"></el-table-column>
            <el-table-column prop="area" label="区域" min-width="150" align="left"></el-table-column>
            <el-table-column prop="isTradecouponOnlinesettle" label="是否支持优惠券线上结算" min-width="200" align="left"></el-table-column>
            <el-table-column prop="description" label="备注" min-width="100" align="left"></el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text" @click="closed('ParkListModal')">关闭</button>
    </div>
  </basic-modal>

  <big-pic-modal ref="bigPicModal">
    <img slot="bigImgSlot" :src="bigImgPath | setImgPath" alt @error="imgError('../../', 'car', $event)" />
  </big-pic-modal>

  <!-- 商家购买设置 -->
  <basic-modal ref="SellerPurchaseSetupModal" static="true" width="680">
    <h3 slot="title">商家购买设置</h3>
    <div class="modal-body" slot="modal-body">
      <div class="main-box">
        <!-- 优惠券列表 -->
        <div class="coupon-list-box">
          <el-radio-group v-model="couponNameSelected" @change="getSelectedSellerForCoupon">
            <p v-for="item in couponNameList">
              <el-radio :label="item.id">{{item.name}}</el-radio>
            </p>
          </el-radio-group>
        </div>
        <div class="middle-box">》</div>
        <!-- 商家列表 -->
        <div class="seller-list-box">
          <el-checkbox-group v-model="sellerNameListSelected" @change="handleCheckedSellerNameListChange">
            <p v-for="item in sellerNameList">
              <el-checkbox :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
            </p>
          </el-checkbox-group>
        </div>
      </div>
      <div class="choose-box">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <span>已选{{sellerNameListSelected.length}}项</span>
      </div>
    </div>

    <div class="modal-footer" slot="modal-footer">
      <button class="ake_btn ake_btn_text ake_btn_confirm" @click="submitSellerPurchaseSetup">确定</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('SellerPurchaseSetupModal')">取消</button>
    </div>
  </basic-modal>

  <!--选择停车场树-->
  <basic-modal ref="selectParkModal" width="400" customeClass="select-park-modal" static="true">
    <h3 slot="title">选择停车场</h3>
    <div class="modal-body" slot="modal-body">
      <div class="common-tree modal-tree-box">
        <ul id="ParkTree" name="ParkTree" class="ztree"></ul>
      </div>
    </div>
    <div class="modal-footer" slot="modal-footer">
      <button type="button" class="ake_btn ake_btn_text ake_btn_confirm" @click="selectParkSure()">确认</button>
      <button class="ake_btn ake_btn_text modal-close" @click="closed('selectParkModal',2)">取消</button>
    </div>
  </basic-modal>

  <SellManageComponent ref="sellManageComponent" @getItemList="getItemList"></SellManageComponent>
</div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

// z-tree
import "../../assets/js/libs/jquery.ztree.core.min.js";
import "../../assets/js/libs/jquery.ztree.excheck.min.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";
import sellManageComponent from "./sellManageComponent/sellManageComponent.vue";

// image
import images from "@mixins/image.js";

// 引进vue的js
import c_manage from "./js/c_manage.js";
export default {
  name: "cManage",
  mixins: [common, stardardList, invokeModal, images, c_manage],
  components: {
    BigPicModal,
    SellManageComponent: sellManageComponent
  },
  data() {
    var checkNumber = (rule, value, callback) => {
      if (!/^\d+(\.\d+)?$/.test(value)) { 
        return callback(new Error("请输入非负数值"));
      } 
      callback();
    };
    var checkNumberForTotalNum = (rule, value, callback) => {
      if (!/^[1-9]\d*$/.test(value)) {
        callback(new Error("请输入正整数值"));
      } else if (value > 100000000) {
        callback(new Error("不能超过最大数值100000000"));
      } else {
        callback();
      }
    };
    var checkMaxCoverNumber = (rule, value, callback) => {
      if (!/^([1-9]\d*)$/.test(value)) {
        callback(new Error("请输入大于等于1的整数值"));
      } else {
        if (value < 1) {
          callback(new Error("请输入大于等于1的整数值"));
        } else {
          callback();
        }
      }
    };
    var checkFaceValue = (rule, value, callback) => {
      var couponType = this.MerchantCouponsModalData.basicData.couponType;
      if (couponType == "0") {
        //免费券
        return callback();
      }
      if (couponType == "1" || couponType == "3") {
        //金额减扣券 固定值券
        if (
          !/^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/.test(value) ||
          value < 0
        ) {
          return callback(new Error("请输入正确的金额"));
        }
      }
      if (couponType == "2") {
        //金额折扣券
        // if (!/^(0\.[0-9]+)$/.test(value) || value < 0) {
        //   return callback(new Error("请输入正确的折扣(0-1之间的数值)"));
        // }
        if (!/^[1-9]$/.test(value) || value < 0) {
          return callback(new Error("请输入正确的折扣(1-9之间的数值)"));
        }
      }
      if (couponType == "4") {
        //分鐘數
        if (!/^[1-9]+[0-9]*$/.test(value)) {
          return callback(new Error("请输入正确的分钟数(大于0的整数)"));
        }
      }
      callback();
    };
    var validateParkJson = (rule, value, callback) => {
      var self = this;
      if (!self.tableData.parkItems.length) {
        return callback(new Error("请选择支持的停车场"));
      }
      callback();
    };

    return {
      paramName: "query_parkId",
      isShowTreeForFinance: false, //是否显示选择财务主体的停车场树
      fixedCols: 3,
      total: 0,
      entity: {
        parkList: []
      },
      ParkListModalData: {
        list: []
      },
      tableData: {
        parkItems: [] //通过停车场的ID请求到的停车场对应的VIP类型的列表
      },
      vipTypeData: {
        channelAuthTree: "",
        channelSeqList: []
      },
      MerchantCouponsModalData: {
        type: "add",
        tabName: "",
        hasDiscount: 0, //是否有折扣价
        moreSetupShow: false, //更多设置是否显示
        basicData: {
          //基础信息obj
          id: null,
          name: "",
          parkList: [],
          inputParks: [],
          balanceType: 0,
          sellFromTo: "",
          validFromTo: "",
          validDay: 1440,
          couponType: "0",
          faceValue: "",
          originalPrice: "",
          realPrice: "",
          useRuleMin: "",
          useRuleMax: "",
          totalNum: "",
          remark: "",
          isLimitTotal: 1,
          couponRule: "0",
          useParkingFee: 0,
          maxCoverNum: 1,
          financialParkId: "", //记录哪一个停车场为财务主体
          parkJson: [], //每条记录都记录 停车场的ID和对应的VIP类型的关系
          isCover: 0 //是否可叠加
        },
        shoppingSetup: {
          //购买配置obj
          couponName: "", //优惠券名称
          checkedCoupons: [],
          couponList: [],
          couponIdListStr: ""
        }
      },
      rules: {
        name: [{
            required: true,
            message: "请输入券名称",
            trigger: "change"
          },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "change"
          }
        ],
        couponType: [{
          required: true,
          message: "请选择券类型",
          trigger: "change"
        }],
        originalPrice: [{
            required: true,
            message: "请填写原价",
            trigger: "change"
          },
          {
            validator: checkNumber,
            trigger: "change"
          }
        ],
        maxCoverNum: [{
            required: true,
            message: "请填写可使用数量",
            trigger: "change"
          },
          {
            validator: checkMaxCoverNumber,
            trigger: "change"
          }
        ],
        totalNum: [{
            required: true,
            message: "请填写总数",
            trigger: "change"
          },
          {
            validator: checkNumberForTotalNum,
            trigger: "change"
          }
        ],
        realPrice: [{
            required: true,
            message: "请填写折扣价",
            trigger: "change"
          },
          {
            validator: checkNumber,
            trigger: "change"
          }
        ],
        faceValue: [{
          required: true,
          validator: checkFaceValue,
          trigger: ["blur", "change"]
        }],
        useRuleMin: [{
            required: true,
            message: "请填写最小使用条件",
            trigger: "change"
          },
          {
            validator: checkNumber,
            trigger: "change"
          }
        ],
        useRuleMax: [{
            required: true,
            message: "请填写最大使用条件",
            trigger: "change"
          },
          {
            validator: checkNumber,
            trigger: "change"
          }
        ],
        validDay: [{
            required: true,
            message: "请填写使用有效期",
            trigger: "change"
          },
          {
            validator: checkNumber,
            trigger: "change"
          }
        ],
        parkJson: [{
          required: true,
          validator: validateParkJson,
          trigger: "change"
        }],
        financialParkId: [{
          required: true,
          message: "请选择财务主体",
          trigger: "change"
        }]
      },
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示
      searchList: [{
          type: "text",
          isShow: false,
          name: "name",
          text: "优惠券名称",
          value: ""
        },

        {
          type: "select",
          isShow: false,
          name: "status",
          text: "状态",
          value: "",
          options: [{
              name: "全部",
              value: ""
            },
            {
              name: "未启用",
              value: "0"
            },
            {
              name: "已启用",
              value: "1"
            },
            {
              name: "已禁用",
              value: "2"
            }
          ]
        },
        {
          type: "select",
          isShow: false,
          name: "couponType",
          text: "类型",
          value: "",
          options: [{
              name: "全部",
              value: ""
            },
            {
              name: "免费券",
              value: "0"
            },
            {
              name: "金额扣减券",
              value: "1"
            },
            {
              name: "金额折扣券",
              value: "2"
            },
            {
              name: "金额固定值券",
              value: "3"
            },
            {
              name: "时间券",
              value: "4"
            },
            {
              name: "不同计价券",
              value: "5"
            }
          ]
        },
        {
          type: "select",
          isShow: false,
          name: "validity",
          text: "有效性",
          value: "",
          options: [{
              name: "销售期内，有效期内",
              value: ""
            },
            {
              name: "销售期内，有效期外",
              value: "1"
            },
            {
              name: "销售期外，有效期内",
              value: "2"
            },
            {
              name: "销售期外，有效期外",
              value: "3"
            },
            {
              name: "全部",
              value: "4"
            }
          ]
        },
        {
          type: "datePicker",
          isShow: false,
          name: "query_time",
          text: "有效期",
          propName: "validFrom,validTo",
          value: "",
          style: {
            width: "360px"
          }
        }
      ],
      theadsInfo: [{
          index: 1,
          isShow: false,
          prop: "name",
          text: "券名称",
          sortable: true,
          minWidth: 50
        },
        {
          index: 2,
          isShow: false,
          prop: "couponType",
          text: "券类型",
          sortable: true,
          minWidth: 50
        },
        {
          index: 3,
          isShow: false,
          prop: "status",
          text: "券状态",
          sortable: true,
          minWidth: 40
        },
        {
          index: 4,
          isShow: false,
          prop: "parkListCount",
          text: "适用停车场",
          sortable: true,
          minWidth: 45
        },
        {
          index: 5,
          isShow: false,
          prop: "originalPrice",
          text: "原价(元)",
          sortable: true,
          minWidth: 50
        },
        {
          index: 6,
          isShow: false,
          prop: "realPrice",
          text: "折扣价(元)",
          sortable: true,
          minWidth: 50
        },
        {
          index: 7,
          isShow: false,
          prop: "totalNum",
          text: "已售/总数",
          sortable: true,
          minWidth: 60
        },
        {
          index: 8,
          isShow: false,
          prop: "code",
          text: "券代码",
          sortable: true,
          minWidth: 60,
          initHidden: true
        },
        // {
        //   index: 5,
        //   isShow: false,
        //   prop: "validDay",
        //   text: "使用有效期（分钟）",
        //   sortable: true,
        //   minWidth: 50
        // },
        {
          index: 9,
          isShow: false,
          prop: "sellFrom",
          text: "可销售时间",
          sortable: true,
          minWidth: 73,
          initHidden: true
        },
        {
          index: 10,
          isShow: false,
          prop: "validFrom",
          text: "可发放时间",
          sortable: true,
          minWidth: 73,
          initHidden: true
        },
        {
          index: 11,
          isShow: false,
          prop: "useRule",
          text: "使用条件",
          sortable: true,
          minWidth: 60,
          initHidden: true
        }
        // {
        //   index: 11,
        //   isShow: false,
        //   prop: "balanceType",
        //   text: "结算类型",
        //   sortable: true,
        //   minWidth: 50,
        //   initHidden: true
        // },
        // {
        //   index: 12,
        //   isShow: false,
        //   prop: "faceValue",
        //   text: "面值",
        //   sortable: true,
        //   minWidth: 50,
        //   initHidden: true
        // },
        // {
        //   index: 15,
        //   isShow: false,
        //   prop: "remark",
        //   text: "描述",
        //   sortable: true,
        //   minWidth: 50,
        //   initHidden: true
        // }
      ],
      tbodysInfo: []
    };
  },
  methods: {}
};
</script>

<style lang="css">
.vertical::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.vertical::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: #d4d4d4;
}
</style>

<style lang="less">
.couponList-chunk {
  width: 300px;
  margin: 0px auto;

  .el-input-group__prepend {
    overflow: hidden;
    font-size: 12px;
  }

  .el-icon-search {
    font-size: 15px;
    font-weight: bold;
    color: #c4c4c4;
  }
}

.couponsModalBody .el-form-item__content {
  display: flex;
  align-items: center;
}

.finance-main-body .el-form-item__content {
  flex-direction: column;
}
</style>

<style lang="less" scoped>
@import "../../assets/less/libs/zTreeStyle.css";
@import "../../assets/less/manage.less";

.pItem {
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  flex: 1;
}

.switch-btn-box {
  position: absolute;
  top: -35px;
  right: 30px;

  .tip {
    color: #666666;
    padding-right: 15px;
  }
}

.el-table td,
.el-table th {
  padding: 0 16px !important;

  .cell {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.main-box {
  display: flex;
  justify-content: space-between;

  .middle-box {
    width: 10%;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .coupon-list-box,
  .seller-list-box {
    padding-left: 10px;
    height: 200px;
    width: 45%;
    border: 1px solid #dddddd;
    overflow: auto;

    p {
      height: 30px;
      line-height: 30px;
    }
  }

  .coupon-list-box {
    padding-top: 10px;
  }
}

.choose-box {
  margin-top: 5px;
  margin-left: 55%;
  width: 45%;

  span {
    float: right;
  }
}

.faceValue-chunk {
  >.el-form-item__content {
    >span {
      >span {
        &:last-child {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
